<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center list_flex_0_ibhf"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub list_fd0_0_ibhf'>
					<view class='flex flex-wrap align-center list_fd0_0_c0_ibhf' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  list_fd0_0_c0_c0_ibhf'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='list_fd0_0_c1_c0_ibhf'>课程章节123</text>
					</view>
					<view class='flex flex-wrap align-center justify-end list_fd0_0_c0_ibhf'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局2flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center list_flex_1_ibhf">
				<template v-for='(item,key0) in list'>
					<view class='flex flex-wrap align-center list_fd1_0_ibhf' :key='key0'>

						<view class='benben-swipe-action '>
							<benben-swipe-action v-model="item.opencb" :auto='true' slide-type='right' @tap.stop="hide">
								<view class='flex flex-wrap align-center justify-between list_fd1_0_c0_c1_ibhf'>
									<text class="hid2" style="font-size: 32rpx;font-weight: 500;" @tap.stop="jump(1,item)">{{item.name}}</text>
									<view class='flex flex-wrap align-center' >
										<text class='fu-iconfont2  list_fd1_0_c0_c1_c1_c0_ibhf' @tap.stop="add(1,item,key0)">&#xe7b6;</text>
										<text class='fu-iconfont2  list_fd1_0_c0_c1_c1_c1_ibhf' @tap.stop="check(1,item,key0)" v-if=" item.isopen===false && item.children">&#xe78a;</text>
										<text class='fu-iconfont2  list_fd1_0_c0_c1_c1_c1_ibhf' @tap.stop="check(1,item,key0)" v-if=" item.isopen===true && item.children">&#xe7ed;</text>
									</view>
								</view>

								<template #additional>
									<view class='flex align-center list_fd1_0_c0_c0_ibhf'>
										<text class='list_fd1_0_c0_c0_c0_ibhf' @tap.stop="edit(1,item,key0)">重命名</text>
										<text class='list_fd1_0_c0_c0_c1_ibhf' @tap.stop="add(1,item,key0)">新增子级</text>
										<text class='list_fd1_0_c0_c0_c2_ibhf' @tap.stop="del(1,item,key0)">删除</text>
									</view>

								</template>
							</benben-swipe-action>
						</view>

						<template v-for='(child,key1) in item.children'>
							<view class='flex flex-wrap align-center list_fd1_0_ibhf' v-if=" item.isopen===true"
								:key='key1'>

								<view class='benben-swipe-action list_fd1_0_ibhf'>
									<benben-swipe-action v-model="child.opencb" :auto='true' slide-type='right'  @tap.stop="hide">
										<view class='flex flex-wrap align-center justify-between list_fd1_0_c0_c1_ibhf'>
											<text class="hid2" @tap.stop="jump(2,child)"  style="margin-left: 24rpx;">{{child.name}}</text>
											<view class='flex flex-wrap align-center' >
												<text class='fu-iconfont2  list_fd1_0_c0_c1_c1_c0_ibhf' @tap.stop="add(2,child,key0,key1)" >&#xe7b6;</text>
												<text class='fu-iconfont2  list_fd1_0_c0_c1_c1_c1_ibhf' @tap.stop="check(2,child,key1,key0)" v-if=" child.isopen===false && child.children">&#xe78a;</text>
												<text class='fu-iconfont2  list_fd1_0_c0_c1_c1_c1_ibhf' @tap.stop="check(2,child,key1,key0)" v-if=" child.isopen===true && child.children">&#xe7ed;</text>
											</view>
										</view>

										<template #additional>
											<view class='flex align-center list_fd1_0_c0_c0_ibhf'>
												<text class='list_fd1_0_c0_c0_c0_ibhf' @tap.stop="edit(2,child,key1)">重命名</text>
												<text class='list_fd1_0_c0_c0_c1_ibhf'  @tap.stop="add(2,child,key1)">新增子级</text>
												<text class='list_fd1_0_c0_c0_c2_ibhf' @tap.stop="del(2,child,key1)">删除</text>
											</view>

										</template>
									</benben-swipe-action>
								</view>

								<template v-for='(value,key2) in child.children'>
									<view class='flex flex-wrap align-center list_fd1_0_ibhf'
										v-if=" child.isopen===true" :key='key2'>
										<view class='benben-swipe-action list_fd1_0_ibhf'>
											<benben-swipe-action v-model="value.opencb" :auto='true' slide-type='right'  @tap.stop="hide">
												<view @tap.stop="jump(3,value)" class='flex flex-wrap align-center justify-between list_fd1_0_c0_c1_ibhf'>
													<text class="hid2" style="margin-left: 48rpx;">{{value.name}}</text>
												</view>

												<template #additional>
													<view class='flex align-center list_fd1_0_c0_c0_ibhf'>
														<text class='list_fd1_0_c0_c0_c0_ibhf' @tap.stop="edit(3,value,key2)">重命名</text>
														<text class='list_fd1_0_c0_c0_c2_ibhf' @tap.stop="del(3,value,key2)">删除</text>
													</view>

												</template>
											</benben-swipe-action>
										</view>

									</view>
								</template>

							</view>
						</template>

					</view>
				</template>

			</view>
			<benben-popup v-model="popupShow1758159673073" :mask="true" :mask-close-able="true" mode='center'
				:z-index='9999' background-color='rgba(0, 0, 0, 0.5)'>
				<!---flex布局2flex布局开始-->
				<view class="flex flex-wrap align-center justify-center benben-flex-layout people_flex_3_ibhf">
					<view class='flex flex-direction align-center people_fd3_0_ibhf'>
						<view class='flex flex-direction align-center justify-center people_fd3_0_c0_ibhf'>
							<text class='people_fd3_0_c0_c0_ibhf'>{{title}}</text>
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="text"
								:placeholder="inputname" confirm-type="done" :maxlength="-1"
								:adjust-position='true' v-model="inputone"
								placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="text" :placeholder="inputsort"
								confirm-type="done" :maxlength="-1" :adjust-position='true' v-model="inputtwo"
								placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c3_ibhf'>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c0_ibhf'>
								<text @tap.stop="popupShow1758159673073 = false">取消</text>
							</view>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c1_ibhf'>
								<text @tap.stop="tj">提交</text>
							</view>
						</view>
					</view>
				</view>

				<!---flex布局2flex布局结束-->

			</benben-popup>
			<benben-popup v-model="iseditopen" :mask="true" :mask-close-able="true" mode='center'
				:z-index='9999' background-color='rgba(0, 0, 0, 0.5)'>
				<!---flex布局2flex布局开始-->
				<view class="flex flex-wrap align-center justify-center benben-flex-layout people_flex_3_ibhf">
					<view class='flex flex-direction align-center people_fd3_0_ibhf'>
						<view class='flex flex-direction align-center justify-center people_fd3_0_c0_ibhf'>
							<text class='people_fd3_0_c0_c0_ibhf'>修改章节名称</text>
						</view>
						<view class='flex flex-wrap align-center people_fd3_0_c1_ibhf' style="margin-bottom: 100rpx;">
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="text"
								placeholder="请输入章节名称" confirm-type="done" :maxlength="-1"
								:adjust-position='true' v-model="inputzjmc"
								placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						</view>
						<!-- <view class='flex flex-wrap align-center people_fd3_0_c1_ibhf'>
							<benben-input class='flex-sub people_fd3_0_c1_c0_ibhf' type="text" :placeholder="inputsort"
								confirm-type="done" :maxlength="-1" :adjust-position='true' v-model="inputtwo"
								placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" />
						</view> -->
						<view class='flex flex-wrap align-center people_fd3_0_c3_ibhf'>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c0_ibhf'>
								<text @tap.stop="iseditopen = false">取消</text>
							</view>
							<view class='flex flex-wrap align-center justify-center people_fd3_0_c3_c1_ibhf'>
								<text @tap.stop="tjedit">提交</text>
							</view>
						</view>
					</view>
				</view>
			
				<!---flex布局2flex布局结束-->
			
			</benben-popup>
			<!---flex布局2flex布局结束-->
			<view :style="{height: '88rpx'}"></view>
			<view class="flex flex-wrap align-center justify-center benben-position-layout flex list_flex_2_ibhf">
				<button class='list_fd2_0_ibhf' @tap.stop="add(0,0,0)">新增一级目录</button>

			</view>
			<view :style="{height: '88rpx'}"></view>


		</view>
	</page-body>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				course:'',//课程id
				bookid:'',//素材id
				popupShow1758159673073: false,
				iseditopen:false,//重命名弹框
				inputzjmc:'',//
				/** isopen【是否显示二级】
				 *   isopen【是否显示三级】
				 *   isopen【是否显示三级】
				 *   isopen【是否显示二级】 **/
				 course:'',//课程id
				"list": [
				// 	{
				// 	"id": "",
				// 	"name": "第一章",
				// 	"isopen": false,
				// 	"erlist": [{
				// 		"name": "1.1第一节",
				// 		"sanlist": [{
				// 			"name": "1.1.1"
				// 		}, {
				// 			"name": "1.1.2"
				// 		}],
				// 		"isopen": false
				// 	}, {
				// 		"name": "1.2第二节",
				// 		"sanlist": [{
				// 			"name": "1.2.1"
				// 		}, {
				// 			"name": "1.2.2"
				// 		}],
				// 		"isopen": false
				// 	}]
				// }, {
				// 	"id": "",
				// 	"name": "第二章",
				// 	"isopen": false,
				// 	"erlist": [{
				// 		"name": "2.1第一节",
				// 		"sanlist": [{
				// 			"name": "2.1.1"
				// 		}, {
				// 			"name": "2.1.2"
				// 		}],
				// 		"isopen": false
				// 	}, {
				// 		"name": "2.2第二节",
				// 		"sanlist": [{
				// 			"name": "2.2.1"
				// 		}, {
				// 			"name": "2.2.2"
				// 		}],
				// 		"isopen": false
				// 	}]
				// },
				],
				title:'新增一级目录',//弹框标题
				inputname:'请输入一级目录名称，必填项',//输入框占位符
				inputone:'',//输入框绑值
				inputsort:'排序，正整数',//输入框占位符
				inputtwo:'',//输入框绑值
				chapter_id:'',//章节id
				opencb:false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.course=options.course
			this.bookid=options.bookid
			this.getlist()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			check(type, item, key, key2) {
				if (type == 1) {
					this.list[key].isopen = !this.list[key].isopen
					this.list.splice(key,1,this.list[key])
				} else {
					this.list[key2].children[key].isopen = !this.list[key2].children[key].isopen
				}
				
				// this.$forceUpdate()
			},
			add(type,item,index){
				this.popupShow1758159673073=true
				this.inputone=''
				this.inputtwo=''
				if(type==0){
					this.chapter_id='0'
					this.title='新增一级目录'
					this.inputname='请输入一级目录名称，必填项'
					this.inputsort='排序，正整数'
				}else if(type==1){
					this.chapter_id=item.aid
					this.title='新增二级目录'
					this.inputname='请输入二级目录名称，必填项'
					this.inputsort='排序，正整数'
				}else {
					this.chapter_id=item.aid
					this.title='新增三级目录'
					this.inputname='请输入三级目录名称，必填项'
					this.inputsort='排序，正整数'
				}
			},
			edit(type,item,index){
				this.iseditopen=true
				this.inputzjmc=item.name
				this.chapter_id=item.aid
			},
		// 提交新增子章节
			async tj(){
				if(!this.inputone){
					this.$message.info(this.inputname)
					return
				}
				if(!this.inputtwo){
					this.$message.info('请输入排序')
					return
				}
				let obj={
					name:this.inputone,
					textbook_id:this.bookid,
					chapter_id:this.chapter_id,
					sort:this.inputtwo
				}
				console.log(obj)
				// return
				
				let res = await this.$api.post(global.apiUrls.post67f729fb09adc, obj);
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				console.log(res.data.data)
				this.popupShow1758159673073=false
				this.getlist()
			},
			// 重命名
			async tjedit(){
				if(!this.inputzjmc){
					this.$message.info('请输入章节名称')
					return
				}
				
				let obj={
					name:this.inputzjmc,
					aid:this.chapter_id,
				}
				let res = await this.$api.post(global.apiUrls.post678b4b048051b, obj);
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				console.log(res.data.data)
				this.iseditopen=false
				this.getlist()
			},
			del(type,item,index) {
				let _this=this
				this.chapter_id=item.aid
				uni.showModal({
					title: "提示",
					content: "确定删除该章节吗？",
					confirmColor: "#145EFD",
					success:res=>{
						console.log(res)
						if (res.confirm) {
							_this.delzj()
						}else{
							return
						}
						
					}
				})
			},
			// 删除章节
			async delzj(){
				let res = await this.$api.post(global.apiUrls.post68ccd30915bac, {
					aid:this.chapter_id,
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				console.log(res.data.data)
				// this.iseditopen=false
				this.getlist()
			},
		
			async getlist() {
				
				let res = await this.$api.post(global.apiUrls.post6818697f95795, {
					course_id: this.course,
				})

				if (res.data.code == 1) {
					console.log(res.data)
					this.list = res.data.data.list.map(item=>{
						item.isopen=false
						item.opencb=false
						if(item.children){
							if(item.children.length>0){
								item.children.map(items=>{
									items.isopen=false
									item.opencb=false
									if(items.children){
										if(items.children.length>0){
											items.children.map(itemd=>{
												itemd.isopen=false
												item.opencb=false
											})
										}
									}
								})
							}
						}
						return item
					})
					console.log(this.list)
					// this.$emit('myEvent', res.data.data.num);
				}
			},
			jump(type,item) {
				// 章节最多就是三级，最底层级跳转，就是下边没有子级了能跳转
				// if(type==1){
				// 	if(item.children){
				// 		return
				// 	}
				// }else if(type==2){
				// 	if(item.children.length>0){
				// 		return
				// 	}
				// }
				uni.navigateTo({
					url: '/pages/kc/teacherzjxq/teacherzjxq?id='+item.aid
				})
			},
			hide(){
				console.log('hide')
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto;

		.list_flex_2_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			bottom: calc(88rpx + var(--window-bottom));

			.list_fd2_0_ibhf {
				border-radius: 33rpx 33rpx 33rpx 33rpx;
				width: 80%;
				line-height: 88rpx;
				font-size: 24rpx;
				background: #4781f5;
				color: #fff;
			}
		}

		.list_flex_1_ibhf {
			width: 100%;
			padding: 0rpx 24rpx 0rpx 24rpx;
		}

		.list_fd1_0_ibhf {
			width: 100%;
		}

		.list_fd1_0_c0_c0_ibhf {
			height: 88rpx;
		}

		.list_fd1_0_c0_c0_c0_ibhf {
			width: 150rpx;
			text-align: center;
			line-height: 84rpx;
			color: var(--benbenFontColor3);
			background: #53A7FC;
			background-size: 100% auto;
		}

		.list_fd1_0_c0_c0_c1_ibhf {
			width: 150rpx;
			text-align: center;
			line-height: 84rpx;
			color: var(--benbenFontColor3);
			background: #FCC14F;
			background-size: 100% auto;
		}

		.list_fd1_0_c0_c0_c2_ibhf {
			width: 100rpx;
			text-align: center;
			line-height: 84rpx;
			color: var(--benbenFontColor3);
			background: #F25940;
			background-size: 100% auto;
		}

		.list_fd1_0_c0_c1_ibhf {
			background: rgba(255, 255, 255, 1);
			min-height: 88rpx;
			padding: 24rpx 0;
		}

		.list_fd1_0_c0_c1_c1_c0_ibhf {
			margin: 0rpx 32rpx 0rpx 0rpx;
			color: rgba(40, 96, 244, 1);
		}

		.list_fd1_0_c0_c1_c1_c1_ibhf {
			font-size: 20rpx;
			color: #cccccc;
		}

		.list_flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.list_fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.list_fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.list_fd0_0_c0_ibhf {
			width: 120rpx;

			.list_fd0_0_c0_c0_ibhf {
				font-size: 36rpx;
				color: #333;
			}
		}
	}

	.people_flex_3_ibhf {
		width: 622rpx;
		margin: 0rpx 0rpx 0rpx 64rpx;

		.people_fd3_0_ibhf {
			background: #FFFFFF;
			width: 622rpx;
			height: 530rpx;
			border-radius: 16rpx;

			.people_fd3_0_c0_ibhf {
				margin: 48rpx 0rpx 48rpx 0rpx;

				.people_fd3_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
					font-weight: 600;
				}
			}

			.people_fd3_0_c3_ibhf {
				color: var(--benbenFontColor3);
				font-size: 32rpx;

				.people_fd3_0_c3_c0_ibhf {
					background: #F4F8FD;
					width: 240rpx;
					height: 88rpx;
					margin: 0rpx 44rpx 0rpx 0rpx;
					border-radius: 44rpx;
					color: rgba(20, 94, 253, 1);
					font-size: 32rpx;
				}

				.people_fd3_0_c3_c1_ibhf {
					background: #145EFD;
					width: 240rpx;
					height: 88rpx;
					border-radius: 44rpx;
				}
			}

			.people_fd3_0_c1_ibhf {
				border: 1px solid #F2F4F7;
				background: #F6F7FA;
				width: 526rpx;
				height: 84rpx;
				margin: 0rpx 0rpx 24rpx 0rpx;
				border-radius: 12rpx;
				padding: 0 24rpx;
			}
		}
	}
	.hid2{
		max-width: 580rpx;
	}
</style>
